﻿// TextFieldEx.qml
import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    id: root
    width: 300
    height: 50

    // 基本属性
    property alias text: input.text
    property string placeholder: "请输入内容"
    property bool showClearButton: true
    property int fontSize: 14
    
    // 密码相关属性
    property bool isPassword: false
    property bool passwordVisible: false
    property string passwordChar: "•"
    
    // 验证属性
    property string validRegex: ".*"
    property string errorMessage: "输入格式错误"
    property bool showError: false
    
    // 样式属性
    property color backgroundColor: "#F5F5F5"
    property color borderColor: "#E0E0E0"
    property color focusColor: "#2196F3"
    property color errorColor: "#FF5252"
    property color textColor: "#333333"
    property int borderRadius: 8
    
    // 信号
    signal enterPressed()
    signal validationChanged(bool isValid)

    Rectangle {
        id: background
        anchors.fill: parent
        radius: root.borderRadius
        color: root.backgroundColor
        border {
            width: root.showError ? 2 : 1
            color: root.showError ? root.errorColor : 
                   input.activeFocus ? root.focusColor : root.borderColor
        }

        // 提示文字
        Text {
            id: placeholderText
            anchors {
                left: parent.left
                leftMargin: 12
                verticalCenter: parent.verticalCenter
            }
            text: root.placeholder
            color: "#9E9E9E"
            font.pixelSize: root.fontSize
            visible: !input.text && !input.activeFocus
        }

        // 输入核心
        TextInput {
            id: input
            anchors {
                left: parent.left
                leftMargin: 12
                right: controlButtons.left
                rightMargin: 8
                verticalCenter: parent.verticalCenter
            }
            width: parent.width - 40
            font.pixelSize: root.fontSize
            color: root.textColor
            clip: true
            echoMode: root.isPassword ? (passwordVisible ? TextInput.Normal : TextInput.Password) : TextInput.Normal
            passwordCharacter: root.passwordChar
            selectionColor: root.focusColor
            selectedTextColor: "white"
            
            onTextChanged: validateInput()
            onAccepted: root.enterPressed()
        }

        // 右侧控制按钮
        Row {
            id: controlButtons
            anchors {
                right: parent.right
                rightMargin: 8
                verticalCenter: parent.verticalCenter
            }
            spacing: 6
            
            // 密码可见性切换
            Button {
                id: btnVisibility
                width: 28
                height: 28
                visible: root.isPassword && input.text.length > 0
                background: Rectangle {
                    color: "transparent"
                    Text {
                        text: root.passwordVisible ? "👁️" : "👁️🗨️"
                        anchors.centerIn: parent
                        font.pixelSize: 16
                    }
                }
                onClicked: root.passwordVisible = !root.passwordVisible
            }
            
            // 清除按钮
            Button {
                id: btnClear
                width: 28
                height: 28
                visible: root.showClearButton && input.text.length > 0
                background: Rectangle {
                    color: "transparent"
                    Text {
                        text: "×"
                        color: "#757575"
                        anchors.centerIn: parent
                        font.pixelSize: 20
                    }
                }
                onClicked: {
                    input.text = ""
                    input.forceActiveFocus()
                }
            }
        }
    }

    // 错误提示
    Text {
        id: errorLabel
        anchors {
            top: background.bottom
            topMargin: 4
            left: background.left
            leftMargin: 12
        }
        text: root.errorMessage
        color: root.errorColor
        font {
            pixelSize: root.fontSize - 2
            italic: true
        }
        visible: root.showError
    }

    // 输入验证方法
    function validateInput() {
        const isValid = new RegExp(root.validRegex).test(input.text)
        root.showError = !isValid
        root.validationChanged(isValid)
        return isValid
    }

    // 公共方法
    function clear() {
        input.text = ""
        root.showError = false
    }

    function forceValidation() {
        return validateInput()
    }
}